<template>
    <div class="app-container">
        <el-card class="box-card">
            <div
                slot="header"
                style="display: flex; justify-content: space-between"
            >
                <span>车辆详情</span>
                <el-button>返回</el-button>
            </div>
            <div class="top-card">
                <img src="" title="" alt="暂无图片" />
                <!-- <el-empty :image-size="150" description="暂无图片"></el-empty> -->

                <div class="top-card-right">
                    <div style="font-size: 16px">
                        <span style="font-weight: 600">车架号：</span
                        ><span>{{ detailForm.vinNo }}</span>
                    </div>
                    <div>
                        <span>品牌/车型/车款：</span
                        ><span>{{
                            `${detailForm.brandName}/${detailForm.seriesName}/${detailForm.modelName}`
                        }}</span>
                    </div>
                    <div>
                        <span>车辆归属：</span
                        ><span>{{ detailForm.carDepotName }}</span>
                    </div>
                </div>
            </div>
        </el-card>

        <el-tabs v-model="activeName" @tab-click="handleClick" v-if="isForm">
            <el-tab-pane label="保险详情" name="first">
                <el-card class="box-card">
                    <div slot="header">
                        <span>车辆信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">所属地：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">被保险人：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">行驶证车主：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">租车方名称：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">车牌号：</div>
                            <el-input
                                disabled
                                v-model="detailForm.carNo"
                                class="inp-name-r"
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">品牌：</div>
                            <el-input
                                disabled
                                v-model="detailForm.brandName"
                                class="inp-name-r"
                            ></el-input>
                        </el-col>

                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">厂牌型号：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">座位数：</div>
                            <el-input
                                disabled
                                v-model="detailForm.seatNumber"
                                class="inp-name-r"
                            ></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">发动机号：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">排量：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>

                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">车辆开票价：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">车辆初次登记日期：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">燃料种类：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">保险性质：</div>
                            <el-input disabled class="inp-name-r"></el-input>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>交强险信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">租赁禀议保险公司：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                :value="
                                    rowManage(detailForm.manageVos, 1)
                                        .rentInsuranceCompany
                                "
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">我司投保供应商：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                :value="
                                    rowManage(detailForm.manageVos, 1)
                                        .insuranceSupplier
                                "
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">交强险保单号：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1).policyCode
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">交强险公司：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceCompany
                            }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">交强险公司编码：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceCompanyCode
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">交强险性质：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceType == "1"
                                    ? "运营"
                                    : "非运营"
                            }}</span>
                        </el-col>

                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">交强险保费：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceAmount
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">车船税是否缴纳：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .carTaxStatus == "1"
                                    ? "是"
                                    : "否"
                            }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">车船税：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1).carTax
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">实际交强险开始时间：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .actualBeginTime
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">实际交强险结束时间：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1).actualEndTime
                            }}</span>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>商业险信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">租赁禀议保险公司：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                :value="
                                    rowManage(detailForm.manageVos, 1)
                                        .rentInsuranceCompany
                                "
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">我司投保供应商：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                :value="
                                    rowManage(detailForm.manageVos, 1)
                                        .insuranceSupplier
                                "
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">商业险保单号：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1).policyCode
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">商业险公司：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceCompany
                            }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">商业险公司编码：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceCompanyCode
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">商业险性质：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceType == "1"
                                    ? "运营"
                                    : "非运营"
                            }}</span>
                        </el-col>

                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">商业险保费：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .insuranceAmount
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">实际交强险开始时间：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1)
                                    .actualBeginTime
                            }}</span>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">实际交强险结束时间：</div>
                            <span class="inp-name-r">{{
                                rowManage(detailForm.manageVos, 1).actualEndTime
                            }}</span>
                        </el-col>
                    </el-row>
                    <el-row>
                        <el-col :span="24">
                            <p>保险套餐:</p>
                            <el-table :data="insureDetailList" border>
                                <el-table-column
                                    v-for="i in insureCol"
                                    :label="i.label"
                                    align="center"
                                    :prop="i.prop"
                                ></el-table-column>
                            </el-table>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>其他保险</span>
                    </div>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">其他保险备注：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                v-model="detailForm.otherInsuranceRemark"
                            ></el-input>
                        </el-col>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">其他保险保费合计：</div>
                            <el-input
                                class="inp-name-r"
                                disabled
                                v-model="detailForm.otherInsuranceSumAmount"
                            ></el-input>
                        </el-col>
                    </el-row>
                </el-card>
                <el-card class="box-card">
                    <div slot="header">
                        <span>付款信息</span>
                    </div>
                    <el-row>
                        <el-col :span="6" class="box-card-inp">
                            <div class="inp-name">付款时间：</div>
                            <el-input class="inp-name-r" disabled></el-input>
                        </el-col>
                    </el-row>
                </el-card>
            </el-tab-pane>
            <el-tab-pane label="保险记录" name="second">
                <el-card>
                    <div slot="header">
                        <el-row>
                            <el-col :span="8" class="box-card-inp">
                                <div class="inp-name">车辆交强险总次数：</div>
                                <div></div>
                            </el-col>
                            <el-col :span="8" class="box-card-inp">
                                <div class="inp-name">车辆交强险总金额：</div>
                                <div></div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-table v-loading="false" :data="historyList" border>
                        <el-table-column label="操作" align="center" width="80">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    v-hasPermi="['demo:demo:remove']"
                                    >查看</el-button
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-for="i in historyCol"
                            :label="i.label"
                            align="center"
                            :prop="i.prop"
                            :width="i.width"
                        ></el-table-column>
                    </el-table>
                </el-card>

                <el-card>
                    <div slot="header">
                        <el-row>
                            <el-col :span="8" class="box-card-inp">
                                <div class="inp-name">车辆商业险总次数：</div>
                                <div></div>
                            </el-col>
                            <el-col :span="8" class="box-card-inp">
                                <div class="inp-name">车辆商业险总金额：</div>
                                <div></div>
                            </el-col>
                        </el-row>
                    </div>
                    <el-table v-loading="false" :data="historyList" border>
                        <el-table-column label="操作" align="center" width="80">
                            <template slot-scope="scope">
                                <el-button
                                    size="mini"
                                    type="text"
                                    v-hasPermi="['demo:demo:remove']"
                                    >查看</el-button
                                >
                            </template>
                        </el-table-column>
                        <el-table-column
                            v-for="i in historyCol"
                            :label="i.label"
                            align="center"
                            :prop="i.prop"
                            :width="i.width"
                        ></el-table-column>
                    </el-table>
                </el-card>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>
    
<script>
import { getInsuranceDetails } from "@/api/bxgl/insureManageApi.js";
import { getToken } from "@/utils/auth";

export default {
    name: "InsureManageDetails",
    components: {},
    computed: {},
    data() {
        return {
            isForm: false,
            routeQuery: {},
            activeName: "first",
            detailForm: {},
            insureDetailList: [
                {
                    insuranceType: "强盗险",
                    coverage: "50",
                    InsuranceCosts: "40",
                },
                {
                    insuranceType: "车辆损失险",
                    coverage: "100",
                    InsuranceCosts: "100",
                },

                {
                    insuranceType: "第三者责任险",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "乘客险保额",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "司机险保额",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "划痕险",
                    coverage: "60",
                    InsuranceCosts: "60",
                },

                {
                    insuranceType: "其他险种",
                    coverage: "60",
                    InsuranceCosts: "60",
                },
            ],
            insureCol: [
                {
                    prop: "insuranceType",
                    label: "商业险种",
                },
                {
                    prop: "coverage",
                    label: "保额/万元",
                },
                {
                    prop: "InsuranceCosts",
                    label: "保险费用/元",
                },
            ],
            historyList: [],
            historyCol: [
                {
                    prop: "carNo",
                    label: "交强险保险公司",
                },
                {
                    prop: "vinNo",
                    label: "交强险保单号",
                },
                {
                    prop: "brandName",
                    label: "交强险开始时间",
                },

                {
                    prop: "modelName",
                    label: "交强险结束时间",
                },
                {
                    prop: "seriesName",
                    label: "交强险费用",
                },
                {
                    label: "备注",
                    prop: "businessType",
                },
                {
                    prop: "seriesName",
                    label: "保单时效",
                },
                {
                    label: "记录时间",
                    prop: "businessType",
                },
            ],

            dataList: [],

            // 表单参数
            detailForm: {},
        };
    },
    watch: {
        // $route: {
        //   handler: function (val, oldVal) {
        //     console.log(val);
        //   },
        //   // 深度观察监听
        //   deep: true
        // }
    },
    computed: {
        rowManage() {
            return (arr, type) => {
                let obj = {};
                let arri = [];
                arri = arr.filter((v) => {
                    return v.type == type;
                });
                return (obj = arri[0] || {});
            };
        },
    },
    created() {
        this.routeQuery = this.$route.query;
        this.insuranceDetails();
        // this.getBrandNames()
    },
    methods: {
        handleClick(tab, event) {
            console.log(tab, event);
        },
        insuranceDetails() {
            getInsuranceDetails(this.routeQuery.id).then((res) => {
                if (res.code == "200") {
                    this.detailForm = res.data || {};

                    this.isForm = true;
                }
            });
        },
    },
};
</script>
    
  
<style lang="scss" scoped>
.box-card {
    font-size: 14px;
    margin-bottom: 20px;

    .box-card-inp {
        display: flex;
        align-items: center;
        margin-bottom: 20px;

        .inp-name {
            width: 160px;
            text-align: right;
            font-size: 14px;
        }

        .inp-name-r {
            flex: 1;
        }
    }

    .top-card {
        display: flex;

        img {
            display: block;
            width: 200px;
            height: 160px;
        }

        .top-card-right {
            margin-left: 20px;
            font-size: 14px;
            line-height: 36px;
        }
    }
}

// .form-dialog {
//   ::v-deep .el-dialog__header {
//     padding: 10px 20px;
//     border-bottom: 1px solid #DCDFE6;

//     .el-dialog__headerbtn {
//       top: 15px;
//     }
//   }

// .box-card {
//   margin-bottom: 20px;

//   .card-title {
//     font-size: 16px;
//     position: relative;
//     margin-left: 8px;
//     padding: 0;
//   }

//   .card-title::after {
//     content: '';
//     width: 4px;
//     height: 18px;
//     background-color: aqua;
//     display: block;
//     position: absolute;
//     left: -12px;
//     top: 2px;
//   }
// }

// }
</style>